<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<title>jQuery表单验证</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
	<div class="wrap wrap-sm">
		<header class="header">
			<h1>表单验证</h1>
		</header>
		<div class="form">
			<form id="signup">
				<div class="input-wrap">
					<label class="required">姓名</label>
					<input data-rule="maxlength:5|minlength:2|required:true" class="input-control" id="name" type="text" name="name" placeholder="请输入姓名，2-5个字符" autocomplete="off">
					<p id="name-input-error" class="input-error">姓名格式有误</p>
				</div>
				<div class="input-wrap">
					<label class="required">用户名</label>
					<input data-rule='pattern:"^[a-zA-Z0-9]*$"|maxlength:18|minlength:5|required:true' class="input-control" id="username" type="text" name="username" placeholder="请输入用户名，5-18个数字或字母组合" autocomplete="off">
					<p id="username-input-error" class="input-error">用户名格式有误</p>
				</div>
				<div class="input-wrap">
					<label class="required">年龄</label>
					<input data-rule="min:18|required:true" class="input-control" id="age" type="number" name="age" placeholder="请输入年龄，不可低于18" autocomplete="off">
					<p id="age-input-error" class="input-error">年龄不可低于18</p>
				</div>
				<div class="input-wrap">
					<label class="required">密码</label>
					<input data-rule="minlength:6|maxlength:64|required:true" class="input-control" id="password" type="password" name="password" placeholder="请输入密码，6-64个字符" autocomplete="off">
					<p id="password-input-error" class="input-error">密码长度须6-64个字符</p>
				</div>
				<div class="input-wrap">
					<label>自我介绍</label>
					<input data-rule="required:false" class="input-control" id="intro" type="text" name="intro" placeholder="请输入介绍" autocomplete="off">
				</div>
				<button type="submit">提交</button>
			</form>
		</div>
	</div>
	<script src="js/jquery.js"></script>
	<script src="js/validator.js"></script>
	<script src="js/input.js"></script>
	<script src="js/main.js"></script>
</body>
</html>
